<template>
<yd-layout>
  <!-- 头部导航 -->
  <header>
    <img class="avatar" :src="avatar">
    <h3>{{userName}}</h3>
    <p>
      <span>普通用户</span>
      &nbsp;&nbsp;
      <span>积分：0</span>
    </p>
    <yd-icon name="setting" size="0.5rem" class="icon"></yd-icon>
  </header>
  <!-- /头部导航 -->

  <section>
    <yd-flexbox class="bgfff">
      <yd-flexbox-item>
        <router-link to="#" class="order1">代付款</router-link>
      </yd-flexbox-item>
      <yd-flexbox-item>
        <router-link to="#" class="order2">代收货</router-link>
      </yd-flexbox-item>
      <yd-flexbox-item>
        <router-link to="#" class="order3">退换/售后</router-link>
      </yd-flexbox-item>
      <yd-flexbox-item>
        <router-link to="#" class="order0">全部订单</router-link>
      </yd-flexbox-item>
    </yd-flexbox>

    <yd-cell-group style="margin:10px 0">
      <yd-cell-item arrow>
        <span slot="left" class="item-title1">我的钱包</span>
        <span slot="right">0</span>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left" class="item-title2">我的收藏</span>
        <span slot="right">0</span>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left" class="item-title3">我的足迹</span>
        <span slot="right">0</span>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left" class="item-title4">我的地址</span>
      </yd-cell-item>
    </yd-cell-group>

    <div class="bgfff logout">
      <span @click="logout">退出账号</span>
    </div>
  </section>

  <!-- 底部导航 -->
  <foot-tab slot="tabbar"></foot-tab>
  <!-- /底部导航 -->
</yd-layout>
</template>

<script>
export default {
  name: 'user',
  data(){
    return {
      userName: sessionStorage.user,
      avatar: 'static/img/user/avatar/user.png'
    }
  },
  methods: {
    logout(){
      sessionStorage.removeItem('uid');
      sessionStorage.removeItem('user');
      this.$router.push('/');
    }
  },
  created(){
    if(!sessionStorage.user){
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
header {
  position: relative;
  padding: .3rem 0;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(180deg,#eb3c3c,#ff7459);
  .icon {
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
  }
  .avatar {
    width: 1.6rem;
    height: 1.6rem;
    background: #fff;
    border-radius: 50%;
  }
  h3 {
    margin: .1rem 0;
    font-weight: normal;
    font-size: 16px;
  }
}

.order0, .order1, .order2, .order3 {
  display: block;
  padding: .84rem 0 .24rem;
  text-align: center;
  background: no-repeat center .32rem;
  background-size: 20px;
}
.order0 {
  background-image: url(../assets/icon/order.png);
}
.order1 {
  background-image: url(../assets/icon/order01.png);
}
.order2 {
  background-image: url(../assets/icon/order02.png);
}
.order3 {
  background-image: url(../assets/icon/order03.png);
}

.item-title {
  padding-left: 40px;
  background: no-repeat left center;
  background-size: 30px;
  line-height: 30px;
}
.item-title1 {
  .item-title;
  background-image: url('../assets/icon/icon-wallet.png');
}
.item-title2 {
  .item-title;
  background-image: url('../assets/icon/icon-collection.png');
}
.item-title3 {
  .item-title;
  background-image: url('../assets/icon/icon-history.png');
}
.item-title4 {
  .item-title;
  background-image: url('../assets/icon/icon-address.png');
}
.logout {
  width: 100%;
  line-height: .9rem;
  text-align: center;
  font-size: 14px;
  color: #e4393c;
}
</style>
